<template>
    <div class="page">
        <div class="list">
            <div class="item" v-for="i in 10">
                <div class="left">
                    <div class="name">2024车展视觉效果汇总</div>
                    <div class="time">2025-03-10 17:21</div>
                </div>
                <div class="right">
                    <img class="more" src="@/assets/more.svg" @click="hdlShow" alt="" />
                </div>
            </div>
        </div>
    </div>
    <van-popup v-model:show="show" round position="bottom" :style="{ height: '240px' }" closeable>
        <div class="popup-box">
            <div class="sub-title-box">
                <div class="sub-title">财经脱口秀A</div>
            </div>
            <div class="list">
                <div class="item" @click="hdlShowModify">
                    <img src="@/assets/modify.svg" alt="" />
                    <span>重命名</span>
                </div>
                <div class="item">
                    <img src="@/assets/delete.svg" alt="" />
                    <span>删除</span>
                </div>
            </div>
        </div>
    </van-popup>
    <van-dialog v-model:show="showModify" title="重命名" :showConfirmButton="false" className="modify-dialog" :close-on-click-overlay="true">
        <van-field placeholder="请输入" :clearable="true" clear-icon="cross" />
        <button class="submit-modify">确定修改</button>
    </van-dialog>
</template>

<script setup lang="ts">
    const show = ref(false);
    const showModify = ref(false);

    const hdlShow = () => {
        show.value = true;
    };
    const hdlShowModify = () => {
        show.value = false;
        showModify.value = true;
    };
</script>

<style lang="scss" scoped src="./History.scss"></style>
